<template>
	<view>
		<view class="top-bar">
			<view class="top-bar">
				<view class="top-bar-left iconfont" @tap="back">&#xe614;</view>
				<view class="top-bar-center">好友请求</view>
			</view>
		</view>
		<view class="main">
			<view class="friend-list" v-for="(item,index) in requesterArr" :key="index">
				<view class="friend-list-l">
					<image :src="item.imgurl"></image>
				</view>
				<view class="friend-list-r">
					<view class="friend-list-r-t">
						<view class="name">{{item.name}}</view>
						<view class="btn-agree" @tap="agreeRequest(item.id)">同意</view>
					</view>
					<view class="friend-list-r-b">
						<view class="text">{{item.msg}}</view>
						<view class="btn-reject" @tap="refuseRequest(item.id)">拒绝</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				mytoken: '',
				//请求的用户数组
				requesterArr: [],
				rMsg: ''
			}
		},
		onLoad() {
			this.getStorages()
			this.friendRequest()
		},
		methods: {
			//获取本地缓存
			getStorages: function() {
				try {
					const value = uni.getStorageSync('user')
					if (value) {
						this.uid = value.id
						this.mytoken = value.token
					}
				} catch (e) {
					//没有缓存跳转到登录页面
					uni.showToast({
						title: '服务器发生错误!',
						icon: 'none',
						duration: 2000
					})
					uni.navigateTo({
						url: '../index/index'
					})
				}
			},
			//返回上一级
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			friendRequest() {
				uni.request({
					url: this.baseURL + '/index/getfriend',
					data: {
						uid: this.uid,
						state: 1
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let res = data.data.result

							for (let i = 0; i < res.length; i++) {
								res[i].imgurl = this.baseURL + res[i].imgurl
								this.getRequestMsg(res, i)
							}
							this.requesterArr = res
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//获取请求留言
			getRequestMsg(arr, i) {
				uni.request({
					url: this.baseURL + '/index/getlastmsg',
					data: {
						uid: this.uid,
						fid: arr[i].id,
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let resu = data.data.result.message
							//arr[i].msg = resu
							//赋值取消再赋值
							let e = arr[i]
							e.msg = resu
							arr.splice(i, 1, e)
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//拒绝好友请求
			refuseRequest(fid){
				uni.request({
					url: this.baseURL + '/friend/deletefriend',
					data: {
						uid: this.uid,
						fid: fid,
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							for(let i=0;i<this.requesterArr.length;i++){
								if(this.requesterArr[i].id===fid){
									this.requesterArr.splice(i,1)
								}
							}
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//同意好友请求
			agreeRequest(fid){
				uni.request({
					url: this.baseURL + '/friend/updatefriendstate',
					data: {
						uid: this.uid,
						fid: fid
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							for(let i=0;i<this.requesterArr.length;i++){
								if(this.requesterArr[i].id===fid){
									this.requesterArr.splice(i,1)
								}
							}
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../commons/css/style.scss';

	.top-bar {
		justify-content: flex-start;
		border-bottom: 1px solid $uni-border-color;
		position: relative;

		.top-bar-left {
			width: 88rpx;
			height: 88rpx;
			line-height: 88rpx;
			padding-left:10rpx;

			image {
				margin: 21rpx 0 0 21rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		.top-bar-center {
			position: absolute;
			padding-top: var(--status-bar-height);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.friend-list {
		height: 96rpx;
		padding: 16rpx 0 16rpx 30rpx;
		display: flex;
		margin-top: 16rpx;
		padding-top: var(--status-bar-height);
		&:active {
			background-color: $uni-bg-color-grey;
		}

		.friend-list-l {
			position: relative;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: $uni-border-radius-base;
				background-color: $uni-bg-color;
			}
		}

		.friend-list-r {
			padding-left: 35rpx;

			.friend-list-r-t {
				display: flex;
				width: 540rpx;
				justify-content: space-between;

				.name {
					font-size: 36rpx;
					font-weight: 400;
					color: $uni-text-color;
					line-height: 50rpx;
				}
				.btn-agree {
					width: 100rpx;
					height: 40rpx;
					background-color: #5b8bea;
					font-size: $uni-font-size-sm;
					line-height: 40rpx;
					border-radius: 24rpx;
					text-align: center;
					font-weight: 600;
					color: #FFFFFF;
				}
			}

			.friend-list-r-b {
				display: flex;
				width: 540rpx;
				justify-content: space-between;

				.text {
					width: 400rpx;
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					line-height: 40rpx;
				}

				.btn-reject {
					width: 100rpx;
					height: 40rpx;
					background-color: red;
					font-size: $uni-font-size-sm;
					line-height: 40rpx;
					border-radius: 24rpx;
					text-align: center;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
